<script setup lang="ts">
const props = withDefaults(defineProps<{
  icon?: string
  title?: string
  content?: string
  cancelLabel?: string
  confirmLabel?: string
  hideCancelButton?: boolean
}>(), {
  cancelLabel: '取消',
  confirmLabel: '确认',
  hideCancelButton: false,
})
defineEmits(['cancel', 'confirm'])
</script>

<template>
  <view
    class="absolute left-50% top-50% w-620rpx flex flex-col items-center overflow-hidden rounded-20rpx bg-white -translate-50%"
    @tap.stop=""
  >
    <image v-if="!hideCancelButton" class="absolute right-40rpx top-40rpx h-40rpx w-40rpx" src="@/static/images/xmark.png" @tap="$emit('cancel')" />
    <slot name="all">
      <Spacer height="108" />
      <image class="h-140rpx w-140rpx" :src="icon" />
      <Spacer height="38" />
      <view class="text-40rpx text-#333333 font-semibold leading-56rpx">
        {{ props.title }}
      </view>
      <Spacer height="24" />
      <slot name="content">
        <view class="mx-48rpx text-center text-32rpx text-#333333 leading-45rpx">
          {{ props.content }}
        </view>
      </slot>
      <Spacer height="80" />
      <button v-if="hideCancelButton" class="h-137rpx w-620rpx flex items-center justify-center rounded-none bg-#4999F7 text-36rpx text-white font-medium leading-50rpx" @tap.stop="$emit('confirm')">
        {{ props.confirmLabel }}
      </button>
      <view v-else class="flex items-center">
        <button class="h-137rpx w-310rpx flex items-center justify-center rounded-none bg-#F9F9F9 text-36rpx text-#707070 leading-50rpx" @tap.stop="$emit('cancel')">
          {{ props.cancelLabel }}
        </button>
        <button class="h-137rpx w-310rpx flex items-center justify-center rounded-none bg-#4999F7 text-36rpx text-white font-medium leading-50rpx" @tap.stop="$emit('confirm')">
          {{ props.confirmLabel }}
        </button>
      </view>
    </slot>
  </view>
</template>
